<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery被卷去的头部</title>
    <script src="../jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        margin: 200px auto;
        width: 800px;
        height: 3000px;
        background-color: pink;
      }
      .back {
        font-size: 20px;
        height: 60px;
        width: 40px;
        background-color: red;
        position: fixed;
        right: 40px;
        bottom: 40px;
        display: none;
      }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="back">回到顶部</div>
    <script>
      //获得div到文档流顶部的高度
      var h = $('.container').offset().top;
      $(function () {
        //获得被卷去的头部
        $(window).scroll(function () {
          console.log();
          if ($(document).scrollTop() >= h) {
            $('.back').fadeIn();
          } else {
            $('.back').fadeOut();
          }
        })
        //回到顶部操作
        $('.back').click(function () {
          //注意动画只能操作元素 而不能操作文档流对象
          $('body,html').animate({
            scrollTop:0
          })
        });
      })
    </script>
</body>
</html>